<template>
  <el-drawer style="background: #292929;" v-model="info" @close="() => emit('clickChild')" :show-close="false">
    <svg style="position: absolute;top: 2vh;" @click="() => emit('clickChild')" t="1702609308163" class="icon"
      viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24305" width="24" height="24">
      <path
        d="M941.6 105.4c-15.8-10.5-36.9-10.5-57.9 0L93.6 553.1C72.5 563.7 62 584.7 62 600.5c0 21.1 15.8 36.9 36.9 47.4l273.9 115.9 42.1 115.9c5.3 21.1 21.1 36.9 42.1 42.1h5.3c15.8 0 31.6-10.5 47.4-26.3l42.1-57.9 194.9 84.3c10.5 5.3 21.1 5.3 26.3 5.3 10.5 0 21.1 0 31.6-5.3 15.8-10.5 31.6-26.3 31.6-47.4l121.2-716.4c10.6-31.6-10.5-47.4-15.8-52.7z m-105.3 89.5L393.8 716.4 119.9 600.5l716.4-405.6z m-368.7 669c-5.3 0-5.3 0 0 0L436 790.2l63.2 26.3-31.6 47.4z m321.3-5.3c0 5.3-5.3 10.5-5.3 10.5h-15.8l-326.6-137 458.3-532-110.6 658.5z m0 0"
        p-id="24306" fill="#e6e6e6"></path>
    </svg>
    <div class="list">
      <p>播放列表({{ playList.length }})</p>
      <p>推荐</p>
      <div>
        <div :class="index === playIndex ? 'item itemHover' : 'item'" v-for="(item, index) in playList"
          @click="songInfo = item" :key="item.id">
          <img v-lazys="item?.al?.picUrl || 'https://img.zcool.cn/community/03196b456d7e744000001490d57799f.jpg'">
          <div class="items">
            <div>{{ item.name }}</div>
            <div>{{ item?.ar[0]?.name }}</div>
          </div>
          <div class="delete">
            <svg @click="(e) => songDelete(e, item.id)" t="1702797893310" class="icon" viewBox="0 0 1024 1024"
              version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11041" width="14" height="14">
              <path
                d="M781.28 851.36a58.56 58.56 0 0 1-58.56 58.56H301.28a58.72 58.72 0 0 1-58.56-58.56V230.4h538.56z m-421.6-725.92a11.84 11.84 0 0 1 12-12h281.28a11.84 11.84 0 0 1 12 12V160H359.68zM956.8 160H734.72v-34.56a81.76 81.76 0 0 0-81.76-81.76H371.68a82.08 82.08 0 0 0-81.76 81.76V160H67.2a35.36 35.36 0 0 0 0 70.56h105.12v620.8a128.96 128.96 0 0 0 128.96 128.96h421.44a128.96 128.96 0 0 0 128.96-128.96V230.4H956.8a35.2 35.2 0 0 0 35.2-35.2 34.56 34.56 0 0 0-35.2-35.2zM512 804.16a35.2 35.2 0 0 0 35.2-35.36V393.92a35.2 35.2 0 1 0-70.4 0V768.8a35.2 35.2 0 0 0 35.2 35.36m-164.32 0a35.36 35.36 0 0 0 35.36-35.36V393.92a35.36 35.36 0 1 0-70.56 0V768.8a36.32 36.32 0 0 0 35.2 35.36m328.64 0a35.36 35.36 0 0 0 35.2-35.36V393.92a35.36 35.36 0 1 0-70.56 0V768.8a35.36 35.36 0 0 0 35.36 35.36"
                p-id="11042" fill="#e6e6e6"></path>
            </svg>
          </div>
        </div>
      </div>
    </div>
  </el-drawer>
</template>
  
<script lang="ts" setup>
import { toRefs, defineProps } from 'vue'
import { setPlayHistory } from '../utils/auth'
import useCounterStore from '../stores/counter'
const { songInfo, playList, playIndex } = toRefs(useCounterStore())

const emit = defineEmits(['clickChild'])

const props = defineProps({
  //子组件接收父组件传递过来的值
  info: Boolean,
})
//使用父组件传递过来的值
const { info } = toRefs(props)

//删除song
const songDelete = (event: HTMLElementEventMap['click'], id: Number) => {
  // 阻止事件冒泡
  event.stopPropagation()
  // 获取播放列表中指定歌曲的索引
  const index = playList.value.findIndex((item: {id: Number}) => item.id === id)
  // 从播放列表中删除指定歌曲
  playList.value.splice(index, 1)
  // 更新播放历史
  setPlayHistory(playList.value)

}

</script>

<style lang="scss" scoped>
.list {
  width: 100%;
  height: 92vh;
  position: absolute;
  top: 8vh;
  left: 0;

  p {
    margin: 10px 20px;
  }

  p:nth-child(1) {
    color: #fff;
  }

  p:nth-child(2) {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
  }

  >div::-webkit-scrollbar {
    display: none;
  }

  >div {
    width: 100%;
    height: 75vh;
    margin-top: 4vh;
    overflow: auto;

    .item {
      display: flex;
      align-items: center;
      cursor: pointer;
      padding: 10px 20px;

      img {
        width: 4vw;
        height: 4vw;
        border-radius: 10px;
        margin-right: 10px;
      }

      .items {
        width: 80%;

        >div:nth-child(1) {
          color: #fff;
          font-size: 12px;
          margin-bottom: 3px;
        }

        >div:nth-child(2) {
          color: rgba(255, 255, 255, 0.6);
          font-size: 10px;
        }
      }

      .delete:hover {
        background: rgba(255, 255, 255, 0.2);
        padding: 8px;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

    }

    .item:hover {
      background: rgba(255, 255, 255, 0.1);
    }
  }
}

.itemHover {
  background: rgba(255, 255, 255, 0.2);
}
</style>